import { Col, Form, FormItem, Row } from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { cinemaApi } from '@/apis'
import { formatDate } from '@/utils'
import { handlePrice } from '@/utils/bsshow'

import {
  movieOrderStatusMap,
  movieOrderThirdStatusMap
} from '../../order/constants'

export default defineComponent({
  name: 'DyOrderDetailManage',
  setup() {
    const route = useRoute()
    const data = ref({} as any)

    onMounted(() => {
      orderDetail()
    })

    async function orderDetail() {
      try {
        data.value = await cinemaApi.getOrderDetail(route.query.orderNo)
      } finally {
      }
    }

    return {
      data
    }
  },
  render() {
    return (
      <div>
        <Form>
          <FormItem>
            <h3>订单详情</h3>
          </FormItem>

          <h4>基本信息</h4>
          <Row type="flex" style={{ marginTop: '10px', marginLeft: '30px' }}>
            <Col span={5}>
              <FormItem label="订单编号：">{this.data.orderNo}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="电影院名称：">{this.data.cinemaName}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="电影名称：">{this.data.movieName}</FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="实付金额：">
                {handlePrice(this.data.price, this.data.gold)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="第三方状态：">
                {this.data.thirdStatus
                  ? movieOrderThirdStatusMap[this.data.thirdStatus]
                  : ''}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="我方状态：">
                {movieOrderStatusMap[this.data.status]}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="下单人：">{this.data.member}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="下单手机号：">{this.data.phone}</FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="下单时间：">
                {this.data.orderTime
                  ? formatDate(new Date(parseInt(this.data.orderTime)))
                  : ''}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="支付时间：">
                {this.data.payTime
                  ? formatDate(new Date(parseInt(this.data.payTime)))
                  : ''}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="发起售后时间：">
                {this.data.refundTime
                  ? formatDate(new Date(parseInt(this.data.refundTime)))
                  : ''}
              </FormItem>
            </Col>
          </Row>

          <h4>商品信息</h4>
          {this.data.products?.map(item => (
            <Row
              type="flex"
              style={{ marginTop: '10px', marginLeft: '30px' }}
              align="top"
            >
              <Col span={5}>{`座位号：${item.seatName}`}</Col>
              <Col span={5}>{`商品数量：${item.num}`}</Col>
              <Col span={5}>{`商品售价：${handlePrice(
                item.price,
                item.gold
              )}`}</Col>
            </Row>
          ))}
        </Form>
      </div>
    )
  }
})
